<template>
	<view>
		<view class="ps-section">
			<view class="gs-item" v-for="(pd, index) in list" :key="pd.itemId" @tap="goProduct(pd)">
				<view class="imgItem"><image :src="pd.pictUrl" class="picItem" mode="aspectFit" lazy-load /></view>
				<view class="infoItem">
					<text class="titleInfo">{{ pd.title }}</text>
				</view>
				<view>
					<view class="juanItem">
						<view class="basis-sm">
							<text class="juanInfo" v-if="pd.couponAmount != null">{{ pd.couponAmount }}元劵</text>
						</view>
					</view>
					<view class="volumeItem">月销 {{ pd.volume }}</view>
					<view class="priceItem">
						<text class="zkprice">￥ {{ pd.zkFinalPrice }}</text>
						<text class="yprice">￥ {{ pd.reservePrice }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		list: {
			// 数据列表
			type: Array,
			default() {
				return [];
			}
		}
	},
	methods: {
		goProduct(pd) {
			uni.navigateTo({
				url: '../aduit/main?cnt=' + encodeURIComponent(JSON.stringify(pd))
			});
		}
	}
};
</script>

<style lang="scss">
.ps-section {
	display:flex;
	flex-wrap:wrap;
	margin: 10rpx 15rpx;
	.gs-item {
		display:flex;
		flex-direction: column;
		width: 49%;
		padding: 10rpx;
		margin-bottom: 15rpx;
		background: #fff;
		font-size: 24rpx
		&:nth-child(2n+1){
			margin-right: 2%;
		}
		.imgItem {
			height: 330rpx;
			width: 330rpx;
			.picItem {
				margin: 2rpx;
				height: 330rpx;
				width: 330rpx;
			}
		}
		.infoItem {
			height: 75rpx;
			margin-top: 10rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			.typeInfo {
				background-color: #EC343B;
				color: #ffffff;
				padding: 2rpx 10rpx;
				margin-right: 10rpx;
			}
			.titleInfo {
				font-weight: bold;
			}
		}
		.shopItem {
			margin-top: 10rpx;
			font-size: 22rpx;
			display: flex;
			.shopInfo {
				width: 100%;
				color: #aaaaaa;
				padding-left: 10rpx;
			}
		}
		.juanItem {
			margin-top: 10rpx;
			font-size: 22rpx;
			font-weight: bold;
			display: flex;
			flex-wrap: wrap;
			.juanInfo {
				padding: 0 10rpx;
				color: #ffffff;
				background-image: linear-gradient(45deg, #ec79be, #e83844);
			}
			.commissionInfo {
				padding: 0 10rpx;
				background: linear-gradient(to right, #f2aeb9, #ec89a6);;
			}
		}
		.volumeItem {
			margin-top: 10rpx;
			font-size: 22rpx;
			color: #aaaaaa;
		}
		.priceItem {
			margin-top: 10rpx;
			.zkprice {
				padding-right: 15rpx;
				font-weight: bold;
				color: #ff0000;
			}
			.yprice {
				color: #aaaaaa;
				text-decoration: line-through;
			}
		}
	}
}
</style>
